<template>
  <a-spin :spinning="loading">
    <div class="icesoft-page-header">
      <slot name="header"/>
    </div>
    <div class="icesoft-page pa-6">
      <div class="icesoft-page-content" :class="{'show-shadow': shadow, 'show-radius': radius, 'show-padding': padding,'show-background':background}">
        <slot/>
      </div>
    </div>
  </a-spin>

</template>

<script setup lang="ts">
interface Props {
  shadow?: boolean,
  radius?: boolean,
  padding?: boolean,
  background?: boolean,
  loading?: boolean,
}

const {shadow, radius, padding, background} = withDefaults(defineProps<Props>(), {
  shadow: false,
  radius: true,
  padding: false,
  background: false,
  loading: false,
});
</script>

<style scoped lang="scss">
.icesoft-page-header{
  background: white;
}
.icesoft-page {
  position: relative;
  display: block;
  width: 100%;


  .show-background {
    background-color: white;
  }

  .show-shadow {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  }

  .show-padding {
    padding: 16px 0;
  }

  .show-radius {
    border-radius: 8px;
  }
}
</style>
